<template>
  <div class="goodlist">
    <header>
      <img
        :src="food.image"
        alt=""
      >
      <van-icon
        name="clear"
        class="close"
        @click="goBcak"
      />
    </header>
    <section>
      <van-panel
        :title="food.name"
        class="msg"
      >
        <div class="content">
          <p class="desc">
            <span class="month">月售{{food.sellCount}}份</span>
            <span class="comment">好评率{{food.rating}}%</span>
          </p>
          <p class="price">
            <span class="new">¥{{food.price}}</span>
            <span class="old">{{food.oldPrice}}</span>
          </p>
        </div>
      </van-panel>
      <van-panel
        title="商品介绍"
        class="pro"
      >
        <p class="txt">
         {{food.info}}
        </p>
      </van-panel>
      <van-panel
        title="商品评价"
        class="evaluate"
      >
        <div class="con">
          <p class="tip">
            <van-tag
              color="rgb(0, 151, 255)"
              size="large"
              class="all"
            >全部</van-tag>
            <van-tag
              color="rgb(235, 245, 255)"
              size="large"
              class="good"
            >好评</van-tag>
            <van-tag
              color="rgb(245, 245, 245)"
              size="large"
              class="bad"
            >差评</van-tag>
          </p>
          <div class="eval_item">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              class="item_list"
            >
              <van-cell
                v-for="(item,index) in ratings"
                :key="index"
                class="items_inner"
              >
                <p class="top">
                  <span class="time">2019年12月24日19:16:44</span>
                  <span class="top_r">
                    <span class="name">{{item.username}}</span>
                      <img :src="item.avatar" class="head" alt=""/>
                  </span>
                </p>
                <p class="txt">{{item.text}}</p>
              </van-cell>
            </van-list>
          </div>
        </div>
      </van-panel>
    </section>
  </div>
</template>
<script>
export default {
  data: () => ({
    list: [],
    loading: false,
    finished: false,
    id:0,
    food:{},
    ratings:[]
  }),
  created() {
    this.id=Number(this.$route.params.id);
    this.getfoods();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 5) {
          this.finished = true;
        }
      }, 500);
    },
    async getfoods() {
      const {data:{status,goods}} = await this.$axios.get("/api/getdetail/goods");
      let temp=[];
      goods.forEach((item,index)=>{
        temp.push(item.foods)
      })
      temp.forEach(item=>{
        item.forEach(el=>{
          if(el.id===this.id){
            this.food=el;
            this.ratings=el.ratings;
          }
        })
      });
      // console.log(this.food);
      // console.log(this.ratings);
    },
    goBcak(){
       this.$router.go(-1)
    }
  }
};
</script>
<style lang="less" scoped>
.goodlist {
  header {
    width: 100%;
    height: 280px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .close {
      font-size: 30px;
      border-radius: 50%;
      position: absolute;
      color: #ccc;
      right: 10px;
      top: 10px;
    }
  }
  section {
    background-color: #f5f5f5;
    .msg {
      margin-bottom: 10px;
      .van-cell__title {
        font-size: 16px;
        font-weight: 800;
      }
      .content {
        font-size: 12px;
        box-sizing: border-box;
        padding: 0 10px;
        color: #999;
        .desc {
          .month {
            margin-right: 10px;
          }
          .comment {
          }
        }
        .price {
          padding: 0 0 10px 0;
          .new {
            margin-right: 10px;
            color: #ff5339;
            font-weight: 800;
            font-size: 14px;
          }
          .old {
          }
        }
      }
    }
    .pro {
      font-size: 12px;
      .van-cell__title {
        font-size: 16px;
        font-weight: 800;
      }
      .txt {
        padding: 10px;
        box-sizing: border-box;
        color: #999;
      }
    }
    .evaluate {
      // height: 200px;
      .van-cell__title {
        font-size: 16px;
        font-weight: 800;
      }
      .con {
        .tip {
          box-sizing: border-box;
          padding-left: 30px;
          .all {
          }
          .good {
            margin: 0 10px;
            color: #999;
          }
          .bad {
            color: #999;
          }
        }
        .eval_item {
          font-size: 12px;
          padding: 0 20px;
          box-sizing: border-box;
          .item_list{
            .items_inner{
              .top{
                color: #999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .time{}
                .top_r{
                   display: flex;
                    justify-content: space-between;
                    align-items: center;
                  .name{}
                  .head{
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                  }
                }
              }
              .txt{}
            }
          }
        }
      }
    }
  }
}
</style>